<template>
  <view class="content">
    <view class="topBox">
     
      <view class="users">
        <view class="u-top">
          <image
            :src="imageUrl+userInfo.portrait"
            mode=""></image>
          <view class="tit">
            {{userInfo.nickName}}
			<text class="uni-body">{{userInfo.introduction}}</text>
          </view>
		  
		 
		  
        </view>
        <view class="u-bottom">
          
          <view class="u-item">
            <view class="num">1{{userInfo.expense}}</view>
            <view class="u-tit">好友数量</view>
          </view>
          <view class="u-item">
            <view class="num">{{userInfo.income}}</view>
            <view class="u-tit">笔记数量</view>
          </view>
        </view>
      </view>
    </view>



    <view class="listBox">
      <view class="lists">
        <uni-list>
    
		<uni-list-item title="已删除笔记管理" note="" showArrow
			thumb="../../static/tubiao1.png"
			thumb-size="lg" rightText=""  clickable @click="itemClick(3)"/>
		<uni-list-item title="用户基础信息修改" note="" showArrow
			thumb="../../static/tubiao1.png"
			thumb-size="lg" rightText=""  clickable @click="itemClick(3)"/>
		<uni-list-item title="密码修改" note="" showArrow
			thumb="../../static/tubiao1.png"
			thumb-size="lg" rightText=""  clickable @click="itemClick(3)"/>
		<uni-list-item title="注销用户" note="" showArrow
			thumb="../../static/tubiao1.png"
			thumb-size="lg" rightText=""  clickable @click="itemClick(3)"/>
		<uni-list-item title="退出登录" note="" showArrow
			thumb="../../static/tubiao1.png"
			thumb-size="lg" rightText=""  clickable @click="itemClick(3)"/>
		</uni-list>
      </view>
    </view>

<!-- 		<uni-fab ref="fab" :pattern="pattern" :content="toolsContent" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger"  /> -->
  </view>
</template>

<script>
	import constant from '@/store/constant.js'
	
	const baseImageUrl=constant.baseImageUrl;
	import store from '@/store/index.js';//需要引入store
	export default {
		computed:{
			userInfo(){
				return store.state.user.userInfo
			},
			toolsContent(){
				return store.state.common.toolsContent
			},
		},
		components: {},
		onLoad() {
			//加载新闻通知数据
			store.dispatch('loadUserData',{})
			// uni.startPullDownRefresh();
			
			
		},
		
		data() {
			return {
				imageUrl:baseImageUrl,
				dosign:"签到",
				cover: '../../static/pig.png',
				avatar: '../../static/pig.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				
			}
		},
		methods: {
			showAD(){
				uni.navigateTo({
					url:"/pages/user/ad?userId="+this.userInfo.userId
				})
			},
			itemClick(type){
				console.log(type)
				let url="";
				switch(type){
					case 1:
						url="/pages/user/ad?userId="+this.userInfo.userId;
						break;
					case 2:
						url="/pages/user/pay?userId="+this.userInfo.userId+"&income="+this.userInfo.income;
						break;
					case 3:
						url="/pages/share/createShare";
						break;
					case 4:
						url="/pages/todo/createTodo";
						break;
					case 5:
						url="/pages/target/createTarget";
						break;
					case 6:
						url="/pages/alert/createAlert";
						break;
					case 10:
						url="/pages/user/adbanner";
						break;
					case 11:
						url="/pages/user/adcontent";
						break;
					case 12:
						url="/pages/user/addraw";
						break;
					case 13:
						url="/pages/user/adfullscreen";
						break;
					case 14:
						url="/pages/user/adinterstitial";
						break;
				
					
				}
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
			trigger(e) {
				
				this.toolsContent[e.index].active = !e.item.active
				store.dispatch('toolsJump',e.item.value)
			},
			onClick(e) {
				let url="/pages/user/settingList"
				// console.log(JSON.stringify(this.userInfo));
				// let url="/pages/user/setting?userId="+this.userInfo.userId+"&nickName="+this.userInfo.nickName+"&introduction="+this.userInfo.introduction;
				// url+="&pwd="+this.userInfo.pwd;
				// if(this.userInfo.age!=undefined){
				// 	url+="&age="+this.userInfo.age;
				// }
				// if(this.userInfo.sex!=undefined){
				// 	url+="&sex="+this.userInfo.sex;
				// }
				// if(this.userInfo.birthday!=undefined){
				// 	url+="&birthday="+this.userInfo.birthday;
				// }
				// if(this.userInfo.portrait!=undefined){
				// 	url+="&portrait="+this.userInfo.portrait;
				// }
				
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
			
		}
	}
  // export default {
  //   data() {
  //     return {
  //       extraIcon1: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'auth'
  //       },
  //       extraIcon2: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'cart'
  //       },
  //       extraIcon3: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'chatboxes'
  //       },
  //       extraIcon4: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'email'
  //       },
  //       extraIcon5: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'gift'
  //       },

  //     }
  //   },
  //   methods: {
  //     setFun() {
  //       uni.showToast({
  //         title: "点击设置",
  //         icon: "none"
  //       })
  //     },
  //     clickList() {
  //       uni.showToast({
  //         title: "点击列表",
  //         icon: "none"
  //       })
  //     }
  //   }
  // }
</script>

<style scoped>
  .content {
    background-color: #f5f5f5;
    height: 100vh;
  }

  /* 弧形背景 */
  .topBox {
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 60rpx 20rpx 20rpx;
    box-sizing: border-box;
  }

  .topBox::after {
    content: "";
    width: 140%;
    height: 200px;
    position: absolute;
    left: -20%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background: #00aaff;
  }

  /* 弧形背景 */
  
  .setbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set-left {
    width: 18%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .txt {
    color: #fff;
    font-size: 30rpx;
  }

  .set-right .uni-icons {
    margin-right: 10rpx;
  }

  .users {
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    height: 280rpx;
    background-color: #fff;
    box-shadow: 1px 10rpx 20rpx #ececec;
    border-radius: 12rpx;
  }

  .u-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .users .u-top image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .u-top .tit {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
  }

  .u-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .u-item {
    text-align: center;
  }

  .u-item .u-tit {
    color: #757575;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .u-item .num {
    color: #000000;
    font-size: 33rpx;
    font-weight: 700;
  }

  .bottomBox {
    padding: 20rpx;
    box-sizing: border-box;
  }

  .order-list {
    height: 200rpx;
    margin: -15rpx auto 0;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .o-item {
    width: 25%;
    text-align: center;
  }

  .o-item image {
    width: 65rpx;
    height: 55rpx;
  }

  .o-item .tit {
    font-size: 28rpx;
    margin-top: 10rpx;
  }

  .listBox {
    height: 200rpx;
    margin: -10rpx auto 0;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
  }
</style>